<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="inner-info">
    <Title title="成本信息" style="margin-bottom: 10px;"/>
    <el-form :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage ? 'left' : 'right'" class="customer-form lineHeight32" label-width="110px">
      <el-row :gutter="8" class="content">
        <el-col :span="8">
          <el-form-item label="成本编号：">
            <div class="light-word" @click="toCostDetail(detailData)">
              <ToolTip :content="detailData.costNum"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本来源：">
            <ToolTip v-if="detailData.costBelong || detailData.costBelong === 0" :content="costBelongFilter(detailData.costBelong)"/>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本项：">
            <ToolTip :content="detailData.costItemName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="含税成本(元)：">
            <PriceColumn :real-val="detailData.taxCost" :price="detailData.taxCost / 100" />
          </el-form-item>
        </el-col>
        <!-- 成本类型为公式计算 -->
        <el-col v-if="detailData.costType === 5" :span="8">
          <el-form-item label="成本生成：">
            <span>{{ detailData.autoCost === 1 ? '自动' : '手动' }}</span>
          </el-form-item>
        </el-col>
        <!-- 成本类型为公式计算 -->
        <el-col v-if="detailData.costType === 5" :span="8">
          <el-form-item label="计算公式：">
            <ToolTip :content="detailData.talentOptions && detailData.talentOptions.formula"/>
          </el-form-item>
        </el-col>
        <!-- 成本类型为平台 -->
        <el-col v-if="detailData.costType === 1" :span="8">
          <el-form-item label="平台ID：">
            <ToolTip :content="detailData.platId"/>
          </el-form-item>
        </el-col>
        <!-- 成本类型为分成比例 -->
        <el-col v-if="detailData.costType === 4" :span="8">
          <el-form-item label="分成比例：">
            <ToolTip :content="typeof detailData.dividePercent === 'number' ? detailData.dividePercent * 100 : ''" unit="%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商：">
            <div class="light-word" @click="toSupplierDetail(detailData)">
              <ToolTip :content="detailData.supplierName"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可抵扣税率：">
            <ToolTip :content="(detailData.deductionRate || detailData.deductionRate === 0) ? detailData.deductionRate : ''" unit="%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本说明：">
            <ToolTip :content="detailData.costDescription"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本类型：">
            <ToolTip :content="costTypeFilter(detailData.costType)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本状态：">
            <div
              v-if="detailData.settlementStatus === 0 || detailData.settlementStatus"
              :class="{'light-word': detailData.settlementStatus === 1 || detailData.settlementStatus === 2}"
              @click="toSettleDetail(detailData)">
              <ToolTip :content="settlementStatusFilter(detailData.settlementStatus)"/>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算单号：">
            <ToolTip :content="detailData.settlementNum"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <span v-if="detailData.createDate" class="overflow">{{ detailData.createDate | format('YYYY/MM/DD HH:mm:ss') }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <CheckUserInfo v-if="detailData.creator" :label="detailData.creator" :user-id="detailData.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态：">
            <ToolTip v-if="detailData.approvalStatus === 0 || detailData.approvalStatus" :content="costApprovalStatus(detailData.approvalStatus)"/>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批时间：">
            <span v-if="detailData.approvalDate" class="overflow">{{ detailData.approvalDate | format('YYYY/MM/DD HH:mm:ss') }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单日期：">
            <span v-if="detailData.orderDate" class="overflow">{{ detailData.orderDate | format('YYYY/MM/DD') }}</span>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封账状态：">
            <ToolTip v-if="detailData.relatedOrderId && (detailData.sealBillType === 0 || detailData.sealBillType)" :content="setSealCostType(detailData.sealBillType)"/>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人：">
            <CheckUserInfo v-if="detailData.proposer" :label="detailData.proposer" :user-id="detailData.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封账月份：">
            <ToolTip :content="formatMonth(detailData.costSealMonth)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单封账月份：">
            <ToolTip :content="formatMonth(detailData.sealMonth)"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
import {
  settlementStatusFilter,
  costBelongFilter,
  costTypeFilter,
  costApprovalStatus,
  setSealCostType } from '@/filters/status';
import costOperate from '@/mixins/costToUrl';

export default {
  components: { Title },
  filters: { format },
  mixins: [costOperate],
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    format,
    settlementStatusFilter,
    costBelongFilter,
    costTypeFilter,
    costApprovalStatus,
    setSealCostType,
    formatMonth(str = '') {
      if (!str) return '--';
      return str.replace(/-/g, '/');
    }
  }
};
</script>

<style lang="scss" scoped>
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}
.inner-info {
  margin-bottom: 16px;
  &::v-deep {
    .el-form-item__content{
      display: flex;
    }
    .el-form-item {
      margin-bottom: 5px;
      .el-form-item__label {
        color: #999;
      }
    }
  }
}
.max-width-200 {
  max-width: 200px;
}
.light-word {
  width: 100%;
  color: #406eff;
  cursor: pointer;
}
</style>
